<template>

    <div class="container">

        <h1>在线监测</h1>
        <div class="frame">
            <div class="leftframe">
                <!-- 表单 -->
                <el-form :label-position="labelPosition" label-width="0px" :model="formLabelAlign">
                    <el-radio-group v-model="radio">
                        <el-radio :label="0">{{ illness[0].name }}</el-radio>
                        <el-radio :label="1">{{ illness[1].name }}</el-radio>
                        <el-radio :label="2">{{ illness[2].name }}</el-radio>
                    </el-radio-group>

                    <el-form-item label="日照时数">
                        <el-input v-model="formLabelAlign.sunshine"></el-input>
                        <span class="unit">小时</span>
                    </el-form-item>

                    <el-form-item label="PM2.5">
                        <el-input v-model="formLabelAlign.PMtwo"></el-input>
                        <span class="unit">微克/立方米</span>
                    </el-form-item>

                    <el-form-item label="PM10">
                        <el-input v-model="formLabelAlign.PMten"></el-input>
                        <span class="unit">微克/立方米</span>
                    </el-form-item>

                    <el-form-item label="SO2">
                        <el-input v-model="formLabelAlign.SO2"></el-input>
                        <span class="unit">微克/立方米</span>
                    </el-form-item>

                    <el-form-item label="NO2">
                        <el-input v-model="formLabelAlign.NO2"></el-input>
                        <span class="unit">微克/立方米</span>
                    </el-form-item>

                    <el-form-item label="CO">
                        <el-input v-model="formLabelAlign.CO"></el-input>
                        <span class="unit">微克/立方米</span>
                    </el-form-item>

                    <el-form-item label="O3">
                        <el-input v-model="formLabelAlign.O3"></el-input>
                        <span class="unit">微克/立方米</span>
                    </el-form-item>

                    <el-form-item label="降水量">
                        <el-input v-model="formLabelAlign.precipitation"></el-input>
                        <span class="unit">毫升</span>
                    </el-form-item>

                    <el-form-item label="平均气温">
                        <el-input v-model="formLabelAlign.temperature"></el-input>
                        <span class="unit">摄氏度</span>
                    </el-form-item>

                    <el-form-item label="平均相对湿度">
                        <el-input v-model="formLabelAlign.humidity"></el-input>
                        <span class="unit">%</span>
                    </el-form-item>
                </el-form>

                <button @click="checkAndSend">提交</button>
            </div>


            <div class="rightframe">
                <div id="before" v-show="!submitted">
                    <div class="up">
                        <div class="title">
                            <span class="iconfont icon-yiliaojigou"></span>
                            卫生健康小贴士
                        </div>
                        <ul>
                            <li>勤洗手：经常用肥皂和水彻底洗手，特别是在接触公共物品、咳嗽、打喷嚏、上厕所后，以及准备食物之前。这有助于减少手部携带的细菌和病毒数量。</li>
                            <li>戴口罩：在公共场所或人群密集的地方，正确佩戴口罩，特别是在疫情流行期间。口罩能够阻挡飞沫中的病毒或细菌，降低感染风险。</li>
                            <li>保持社交距离：尽量避免与患有传染病的人密切接触，保持至少1米的社交距离。这有助于减少飞沫传播的可能性。</li>
                            <li>增强免疫力：保持良好的饮食习惯，均衡摄入营养，多吃富含维生素和矿物质的食物。同时，保持充足的睡眠和适当的锻炼，有助于增强身体免疫力，抵抗疾病。</li>
                            <li>接种疫苗：及时接种预防传染病的疫苗，是预防疾病最有效的方法之一。疫苗能够激发身体产生免疫力，降低感染风险。</li>
                        </ul>
                    </div>
                    <div class="down" id="word">这里放一个词云图</div>
                </div>
                <div id="after" v-show="submitted">
                    <div class="up">
                        <div id="result">
                            <div class="title">在线监测报告结果</div>
                            <span>通过在线监测发现当地患病风险为</span><span>25.078%</span><br>
                            <span>近期流感患病风险<span :style="{ color: 'red' }">较高</span>，请注意防护</span>
                        </div>
                        <div id="main1"></div>
                    </div>
                    <div class="down">
                        <div>
                            <div id="title">
                                <span class="iconfont icon-guangzhao"></span>
                                日照时数
                            </div>
                            <span>您所在地的日照时数<span :style="{ color: 'green' }">适中</span>,充足的紫外线照射有助于杀灭病毒</span>
                        </div>
                        <div>
                            <div id="title">
                                <span class="iconfont icon-kongqizhiliang"></span>
                                空气质量
                            </div>
                            <span>您所在地的空气质量指数<span :style="{ color: 'red' }">超标</span>,建议您出门佩戴好口罩</span>
                        </div>
                        <div>
                            <div id="title">
                                <span class="iconfont icon-jiangshui"></span>
                                降水量
                            </div>
                            <span>您所在地的降水量<span :style="{ color: 'blue' }">适中</span>,合适的降水量对疾病的传播有抑制作用</span>
                        </div>
                        <div>
                            <div id="title">
                                <span class="iconfont icon-daqiwendu"></span>
                                气温
                            </div>
                            <span>您所在地的气温<span :style="{ color: 'red' }">较高</span>,温度较为炎热，注意减少衣物，多补充水分</span>
                        </div>
                        <div>
                            <div id="title">
                                <span class="iconfont icon-shidu"></span>
                                湿度
                            </div>
                            <span>您所在地的湿度<span :style="{ color: 'yellow' }">偏高</span>,过于潮湿的环境会滋生病菌,请保持通风</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import * as echarts from "echarts";
import 'echarts-wordcloud'
import axios from 'axios';
import '@/assets/iconfont/on-line/iconfont.css'

export default {
    name: "rthtmd",
    data() {
        return {
            submitted: 0,
            radio: 0,
            labelPosition: 'left',
            formLabelAlign:
            {
                sunshine: '',
                PMtwo: '',
                PMten: '',
                SO2: '',
                NO2: '',
                CO: '',
                O3: '',
                precipitation: '',
                temperature: '',
                humidity: '',
            },

            illness:
                [
                    { name: "流感" },
                    { name: "手足口病" },
                    { name: "猩红热" },
                ],
            text:
                [
                    { text: "这是流感" },
                    { text: "这是手足口病" },
                    { text: "这是猩红热" },
                ],
        };
    },

    methods: {
        checkAndSend() {
            console.log(this.formLabelAlign);
            if (Object.values(this.formLabelAlign).every(value => value !== '')) {
                const formData = {
                    disease: this.radio,
                    ...this.formLabelAlign
                };
                this.submitFormData(formData);
            } else {
                // console.log(this.formLabelAlign);
                alert('请填写完整的信息后再提交！');
            }
        },
        submitFormData(data) {
            this.submitted = 1
            axios.post('/diseaseRecord/onlinePredict', data)
                .then(response => {
                    if (response.data.code === 1) {
                        console.log('数据提交成功');
                        alert('数据提交成功')
                    } else {
                        console.log('数据提交失败');
                    }
                })
                .catch(error => {
                    console.error('数据提交失败：', error);
                });
        }
    },
    mounted() {
        const list = [
            {
                value: '50',
                name: '健康生活方式',
                textStyle: {
                shadowBlur: 4,
                shadowColor: '#ECEFFF',
                shadowOffsetY: 14,
                color: '#73DDFF',
                },
            }, // 50
            { value: '50', name: '卫生监督' },
            { value: '49', name: '消毒杀菌' },
            { value: '48', name: '传染病控制' },
            { value: '47', name: '健康咨询' },
            { value: '46', name: '心理健康辅导' },
            { value: '45', name: '环境保护与健康' },
            { value: '44', name: '应急救护' },
            { value: '43', name: '食品安全' },
            { value: '42', name: '健康风险评估' },
            { value: '41', name: '健康教育宣传' },
            { value: '40', name: '母婴健康' },
            { value: '39', name: '疾病预防控制' },
            { value: '38', name: '健康促进' },
            { value: '37', name: '心理健康干预' },
            { value: '36', name: '健康饮食' },
            { value: '35', name: '定期体检' },
            { value: '34', name: '疾病预防' },
            { value: '33', name: '心理健康' },
            { value: '32', name: '个人卫生' },
            { value: '31', name: '营养均衡' },
            { value: '30', name: '锻炼身体' },
            { value: '29', name: '充足睡眠' },
            { value: '28', name: '疫苗接种' },
            { value: '27', name: '慢性病管理' },
            { value: '26', name: '健康教育' },
            { value: '25', name: '药品安全' },
            { value: '24', name: '公共卫生' },
            { value: '23', name: '健康保险' },
            { value: '22', name: '医学研究' },
        ]
        var myChart2 = echarts.init(document.getElementById('word'));
        let option2 = {
            tooltip: {
                show: true,
                    borderColor: '#fe9a8bb3',
                    borderWidth: 1,
                    padding: [10, 15, 10, 15],
                    confine: true,
                    backgroundColor: 'rgba(255, 255, 255, .9)',
                    textStyle: {
                        color: 'hotpink',
                        lineHeight: 22
                    },
                    extraCssText: 'box-shadow: 0 4px 20px -4px rgba(199, 206, 215, .7);border-radius: 4px;'
            },
            series: [
                {
                type: 'wordCloud',
                shape: 'pentagon',
                left: 'center',
                top: 'center',
                width: '100%',
                height: '100%',
                right: null,
                bottom: null,
                sizeRange: [14, 50],
                rotationRange: [0, 0],
                rotationStep: 0,
                gridSize: 25,
                drawOutOfBound: false,
                layoutAnimation: true,
                textStyle: {
                    fontFamily: 'PingFangSC-Semibold',
                    fontWeight: 600,
                    color: function (params) {
                    let colors = ['#fe9a8bb3', '#fe9a8bb3', '#fe9a8b03', '#9E87FFb3', '#9E87FFb3', '#9E87FFb3', '#fe9a8bb3', '#fe9a8bb3', '#fe9a8bb3', '#73DDFF', '#58D5FF']
                    return colors[parseInt(Math.random() * 10)];
                    },
                },
                emphasis: {
                    focus: 'none',
                },

                data: list,
                },
            ],
        }
        myChart2.setOption(option2)

        
        this.myChart1 = echarts.init(document.getElementById('main1'));
        let option1 = {
            backgroundColor: 'transparent',
            tooltip: {
                show: true
            },
            radar: {
                radius: '90%',
                center: ['50%', '55%'],
                // startAngle: 0,
                splitNumber: 5,
                nameGap: 10,// 图和字的间距 默认15 number
                name: {
                    textStyle: {
                        color: '#000',
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: '#E6E6E6'
                    }
                },
                splitLine: {
                    lineStyle: {
                        width: 1,
                        color: '#E6E6E6'
                    }
                },
                splitArea: {
                    areaStyle: {
                        color: ['#f8f8f8', '#fff',].reverse(),

                    }
                },
                indicator: [{
                    name: '日照时数',
                    max: 370
                },
                {
                    name: 'PM2.5',
                    max: 70
                },
                {
                    name: '降水量',
                    max: 130
                },
                {
                    name: '气温',
                    max: 35
                },
                {
                    name: '湿度',
                    max: 60
                }
                ]
            },
            series: [{
                name: '性别年龄分布',
                type: 'radar',
                symbolSize: 8,
                itemStyle: {
                    borderColor: '#007AFF',
                    borderWidth: 2,
                },
                areaStyle: {
                    normal: {
                        width: 1,
                        opacity: 0.3,
                    },
                },
                data: [{
                    itemStyle: {
                        normal: {
                            color: '#0083FF',
                        },
                    },
                    value: [308, 35, 99, 27, 52]
                }]
            }]
        }
        this.myChart1.setOption(option1)
        
    },
    watch: {  
        submitted(newVal) {  
      if (newVal) {
        this.$nextTick(() => {  
          this.myChart1.resize(); // 在DOM更新后调用resize方法  
        });  
      }  
    },  
  },

};

</script>

<style scoped>
.container {
    width: 100%;
    height: 100%;
    padding-top: 1px;
    background: url(../../../public/image/back8.jpg);
}

.frame {
    display: flex;
}

.leftframe {
    width: 30%;
    height: 850px;
    padding-top: 20px;
    /* background-color: grey; */
    /* border: 2px solid #0c0909; */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.iconfont {
    font-size: 40px;
}

button {
    width: 120px;
    height: 50px;
    border-radius: 3px;
    border: 2px solid #ffffff;
    background-color: #409eff;
    color: white;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.3s;
}

button:hover {
    /* background-color: #66b1ff; */
    border-color: #66b1ff;
}

button:active {
    transform: scale(0.95);
}

.rightframe {
    width: 70%;
    height: 850px;
    /* background-color: aqua; */
    /*  */
}

h1 {
    text-align: center;
    height: 30px;
    font-size: 30px;
    font-family: 楷体, KaiTi, STKaiti, "Microsoft YaHei", sans-serif;
}

.unit {
    position: absolute;
    right: -120px;
    color: black;
    line-height: 36px;
    font-size: 20px;
}

#before {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    /* background-color: #606266; */
    font-size: 26px;
}

.title {
    text-align: center;
    font-size: 30px;
}

.up {
    width: 90%;
    height: 50%;
    /* background-color: #409eff; */
    margin-bottom: 20px;
    margin-top: 10px;
}

.down {
    width: 90%;
    height: 50%;
    /* background-color: white; */
    border-radius: 20px;
}

#before .down {
    background-color: white;
}

#after {
    width: 100%;
    height: 100%;
    /* background-color: #bfa; */
    font-size: 26px;
}

#after .up {
    display: flex;
    height: 40%;
}
#main1 {
    width: 50%;
    height: 100%;
}
#result {
    height: 100%;
    width: 40%;
}
#result .title {
    margin-top: 0;
    margin-bottom: 100px;
}
#after .down {
    height: 60%;
}
#after #title {
    font-size: 35px;
    margin-top: 12px;
}
</style>

<!-- 不加scoped是为了修改element ui 样式 -->
<style>
.el-radio {
    font-size: 20px;
    margin: 10px;
    width: auto;
    height: auto;
}

.el-radio__label {
    font-size: 20px;
    color:black;
}

.el-radio__inner {
    width: 20px;
    height: 20px;
}


.el-radio__lapel {
    color: #050404;
    font-size: 12px;
}

.el-form {
    width: 400px;
}

.el-form-item {
    display: flex;
    margin-top: 20px;
}

.el-form-item__label {
    width: 140px !important;
    text-align: left;
    font-size: 20px;
    color: #0e0a0a;
}

.el-form-item__content {
    margin-left: 0px !important;
    margin-right: 60px;
    line-height: 40px;
    font-size: 14px;
}

.el-input__inner {
    background-color: #FFF;
    background-image: none;
    border-radius: 8px;
    border: 1px solid #DCDFE6;
    color: #606266;
    height: 30px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    width: 150px;
}
</style>